<template>
	<view class="content">
		<uv-sticky>
			<view class="custom-tabs">
				<view class="tab-indicator"
					:style="{ transform: `translateX(${tabIndicatorPosition}%)`, width: tabIndicatorWidth }"></view>
				<view v-for="(item, index) in list" :key="index" @click="handleCut(index)"
					:class="['tab-item', { 'active': listShow === index }]">
					{{ item.name }}
					<text class="count">{{ item.count }}</text>
				</view>
			</view>
		</uv-sticky>
		<!-- 待评价 -->
		<view v-if="listShow === 0" class="treat">
			<view class="treat-item" v-for="item in 10">
				<view class="treat-img">
					<image src="../../../static/test/test_1.png" mode="widthFix"></image>
				</view>
				<view class="treat-text">
					<view class="size-14 color-333  zi-hide-2">珠宝玉石砖石珠宝玉石砖石珠宝珠宝玉石砖石珠宝玉石砖石珠宝珠宝玉石砖石珠宝玉石砖石珠宝</view>
					<view class="treat-btn" @click="handleWrite">去评价</view>
				</view>
			</view>
		</view>
		<!-- 已评价 -->
		<view v-if="listShow === 1" class="already">
			<view class="already-item" v-for="item in 5">
				<view class="size-16 color-333 size-bold ">2024/05/10</view>
				<view class="size-14 color-999">商品评分 1星</view>
				<view class="already-content">珠宝玉石砖石珠宝玉石砖石珠宝珠宝玉石砖石珠宝玉石珠宝珠宝珠宝玉石玉玉石砖石珠宝玉石砖石珠宝珠宝玉石砖石珠宝玉石砖石珠宝</view>
				<view class="already-content-img">
					<view class="content-img" v-for="item in 5">
						<image src="../../../static/test/test_1.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="already-goods">
					<view class="already-img">
						<image src="../../../static/test/test_1.png" mode="widthFix"></image>
					</view>
					<view class="size-14 color-333 already-title">商品名称商品名称商品名称商品名称商品名称商品名称</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				listShow: 0,
				list: [{
						name: '待评价',
						count: 5
					},
					{
						name: '已评价',
						count: 2
					}
				],
				tabIndicatorPosition: 0,
				tabIndicatorWidth: '50%'
			};
		},
		watch: {
			listShow(newVal) {
				// 计算下划线位置和宽度
				this.tabIndicatorPosition = newVal * 100;
			}
		},
		mounted() {
			// 初始化下划线位置
			this.tabIndicatorPosition = this.listShow * 100;
		},
		methods: {
			handleCut(index) {
				this.listShow = index;
			},
			handleWrite() {
				uni.navigateTo({
					url: "/pages/me/write/write"
				})
			}

		}
	};
</script>

<style lang="less" scoped>
	.custom-tabs {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ddd;
		position: relative;
		background-color: #f6f6f8;
		margin: 0 10rpx;

		.tab-indicator {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 4rpx;
			background-color: #daa03d;
			transition: transform 0.3s ease, width 0.3s ease;
			will-change: transform, width;
		}

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			position: relative;
			font-size: 16px;
			color: #333;

			&.active {
				color: #daa03d;
			}

			.count {
				display: inline-block;
				margin-left: 10rpx;
				padding: 4rpx 8rpx;
				border-radius: 12rpx;

			}
		}
	}

	.treat {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 40rpx;

		.treat-item {
			background-color: #fff;
			padding: 30rpx;
			box-sizing: border-box;
			width: 100%;
			border-radius: 10rpx;
			display: flex;
			gap: 20rpx;

			.treat-img {
				width: 160rpx;

				image {
					width: 100%;
					border-radius: 20rpx;
				}
			}

			.treat-text {
				flex: 1;
				display: flex;
				flex-direction: column;

				.treat-btn {
					align-self: flex-end;
					display: inline-block;
					padding: 10rpx 40rpx;
					border: 1px solid #daa03d;
					border-radius: 50rpx;
					margin-top: 50rpx;
					color: #daa03d;
					font-size: 14px;
				}
			}

		}
	}

	.already {
		padding: 30rpx;

		.already-item {
			background-color: #fff;
			padding: 30rpx;
			box-sizing: border-box;
			width: 100%;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			margin-bottom: 40rpx;
			.already-content {
				line-height: 1.5;
				font-size: 16px;
				color: #666;
				text-indent: 2em;
			}

			.already-content-img {
				display: flex;
				gap: 10rpx;
				flex-wrap: wrap;
				.content-img { 
					width: 180rpx; 

					image {
						width: 100%;
						border-radius: 20rpx;
					}
				} 
			}

			.already-goods {
				width: 100%;
				background-color: #f6f6f8;
				padding: 20rpx;
				display: flex;
				gap: 20rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				.already-img {
					width: 100rpx;

					image {
						width: 100%;
						border-radius: 20rpx;
					}
				}

				.already-title {
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>